<template>
  <!-- 我的增值服务 -->
  <div class="page-box">
    <div class="tabs">
      <tabBar
        :list="tabs"
        :active-index="tabActive"
        @change="tabChange"
      ></tabBar>
    </div>
    <div class="service-box " >
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="auto">
          <div class="search-box">
            <el-form-item label="状态" prop="state">
              <el-select clearable filterable v-model="queryParams.state" placeholder="请选择状态" size="small" @change="getMyService">
                <el-option v-for="(value,key) in commonMaps.addedServicesStateMap" :key="key" :label="value.label" :value="key" />
              </el-select>
            </el-form-item>
            
            <!-- <el-form-item>
              <el-button style="background:#24A813;border-color:#24A813" type="primary"  size="small" @click="getMyService">一键续费</el-button>
            </el-form-item><br/>
            <el-form-item v-if="tabActive === 0">
              <el-checkbox v-model="allCheck" @change="selectAll">全选</el-checkbox>
            </el-form-item> -->
          </div>
        </el-form>
        <div class="content flex" v-if="serviceList&&serviceList.length">
          <div class="service-item " :class="{'jjdq':dayNum(item.closeTime)<7&&dayNum(item.closeTime)>=0,'zc':item.state==1,'dq':item.state==2}" v-for="(item,i) in serviceList" :key="i">
             
              <div class="top">
                <div class="name flex">
                  <!-- <span @click="item.checked = !item.checked" v-show="item.type==2" class="check-box" :class="{checked:item.checked}"></span> -->
                  {{item.businessName}}
                </div>
                <div class="endtime"><span>到期时间：</span>{{item.closeTime}}</div>
                <div class="sign" v-text="dayNum(item.closeTime)<7&&dayNum(item.closeTime)>=0?'即将到期':(item.state==1?'正常':'到期')">
                </div>
                <div class="auto">
                  <span>自动续费：</span>
                  <el-switch
                    @change="editAuto($event,item)"
                    :disabled="nowDate==item.closeTime"
                    v-model="item.isAuto"
                    :active-value="1"
                    :inactive-value="2"
                    active-color="#24A813"
                    inactive-color="#999999">
                  </el-switch>
                </div>
                <div class="tip">
                  {{`自动续费开启后，系统将在服务有效期最后一天，续费${item.autoMonth}个月。`}}
                </div>
              </div>
              <div class="btns">
                <el-button style="background-color:#fff;border:1px solid #f2f2f2" size="small" @click="lianxi(item.businessId)" v-if="item.type==2">联系技术</el-button>
                <el-button size="small" type="primary" @click="submitForm(item)" v-loading="loading">续费</el-button>
              </div>
          </div>
        </div>
        <div v-else style="text-align:center;line-height:300px">
            暂未开通任何服务
        </div>
    </div>
    <wxDialog ref="wxDialog" wxCode="https://imgage.maimaihao.com/yuduhulian/erp/static/img/wxCode.png" tip="微信扫码添加技术微信"></wxDialog>
    <renewDialog ref="renewDialog" @close="getMyService"></renewDialog>
    <contactServer ref="contactServer" ></contactServer>
  </div>
</template>

<script>
import tabBar from "../components/tabBar.vue";
import valueAddedServices from '@/api/shanghuduan/valueAddedServices'
import wxDialog from "../components/lianxiJishu.vue"
import renewDialog from "./components/renewDialog.vue"
import contactServer from "./components/contactServer.vue"
import { formatDate } from "@/utils/index";
export default {
  name: "",
  components: { tabBar,wxDialog,renewDialog,contactServer},
  data() {
    return {
      tabActive: 0,
      loading:false,
      tabs: [
        {
          name: "我的接口",
          value: 2,
        },
        {
          name: "我的服务",
          value: 1,
        },
      ],
      allCheck:false,
      serviceList:[],
      // 查询参数
      queryParams: {
        closeTimeStart: "",
        closeTimeEnd: "",
        dataType: "one",
        type:'2',
      },
      nowDate:''
    };
  },
  created() {
    let date = new Date()
    this.nowDate = formatDate(date).slice(0,10)

    this.getMyService()
  },
  mounted(){

  },
  computed:{
    dayNum(){
      return (val)=>{
        let date = (Date.parse(new Date(val)))/1000
        var today=(Date.parse(new Date()))/1000;//当前时间戳
        var nTime = date - today;
        var day =Math.floor(nTime/86400)+1;
        return day;
      }
      
    }
  },
  methods: {
    tabChange(val){
      this.tabActive = val.index
      this.queryParams.type=val.tab.value
      this.getMyService()
    },
    // 获取自己开通的增值服务
    getMyService(){
      // if()
      valueAddedServices.myValueAddedServiceList(this.queryParams).then(res=>{
        if(res.rows&&res.rows.length){
          res.rows.forEach(r=>{
            r.checked = false
          })
          this.serviceList = res.rows
        }else{
          this.serviceList = []
        }
      })
    },
    // 改变自动续费状态
    editAuto(e,item){
      valueAddedServices.myValueAddedServiceChangeAuto(item).then(res=>{
        this.getMyService()
      })
    },
    // 全选
    selectAll(e){
      if(e){
        this.serviceList.forEach(r=>{
          r.checked = true
        })
      }else{
        this.serviceList.forEach(r=>{
          r.checked = false
        })
      }
    },
    // 续费
    submitForm(item){
      this.$refs.renewDialog.open(item)
    },
    lianxi(id){
      this.$refs.contactServer.open(id)
    }
  },
};
</script>

<style scoped lang="scss">
.page-box {
  // padding-bottom: 30px;
  
  .tabs {
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .content{
    flex-wrap: wrap;
  }
  .service-box{
    min-height: calc(100vh - 200px);
    background-color: #fff;
    padding: 20px;

    .service-item{
      border: 1px solid #24A813;
      width: 235px;
      // height: 130px;
      border-radius: 10px;
      margin: 0 0 10px 10px;
      position: relative;
      overflow: hidden;
      color: #fff;
      line-height: 22px;
      .top{
        padding: 15px;
        background-color: #8cc7a3;
        .name{
          align-items: center;
          margin-bottom: 10px;
          .check-box{
            width: 16px;
            height: 16px;
            background-image: url('https://imgage.maimaihao.com/yuduhulian/erp/static/img/huishou/uncheck.png');
            background-size: 100% 100%;
            margin-right: 5px;
            cursor: pointer;
            &.checked{
              background-image: url('https://imgage.maimaihao.com/yuduhulian/erp/static/img/huishou/checked2.png');
            }
          }
        }
      }
      .btns{
        text-align: center;
        padding: 10px 0;
        background-color: #fff;
        .el-button{
          background-color: #24A813;
          border: #24A813;
        }
      }
      .tip{
       margin-top: 10px;
      }
      .sign{
        position: absolute;
        top: 0;
        right: 0;
        font-size: 12px;
        color: #24A813;
        padding: 3px 15px;
        background-color: #fff;
        border-radius: 0 0 0 10px;
      }
      &.jjdq{
        border: 1px solid #EB8200;
        .top{
          background-color: #fab562;
        }
        .sign{
          color: #EB8200;
        }
      }
      &.dq{
        border: 1px solid #DA6565;
        .top{
          background-color: #da6565;
        }
        .sign{
          color: #DA6565;
        }
      }

    }
  }
}
</style>
